<template>
  <div class="item">
      <span class="ordinal">{{ ordinal }}</span>
      <span class="name">{{ item.name }}</span>
      <span class="price">{{ item.price }}</span>
      <span class="amount">
            <item-amount @减少="decrease(item.id)" 
                         @增加="increase(item.id)">
                {{ item.amount }}
            </item-amount>
      </span>
      <span class="subtotal">{{ item.price * item.amount }}</span>
      <span class="operation">
          <!-- 触发`删除`事件并传递购物车项的编号 -->
          <a @click="$emit('删除',item.id)">删除</a>
      </span>
  </div>
</template>

<script>

import ItemAmount from './ItemAmount.vue';

export default {
    name:'CartItem',
    props: {
       ordinal: {
           type: Number,
           required: true
       } ,
       item: {
           type: Object,
           required: true
       },
       decrease: {
           type: Function,
           required: true
       },
       increase: {
           type: Function,
           required: true
       }
    },
    components: {
        'item-amount': ItemAmount
    }
}
</script>

<style>
.item { display: flex; margin: 0 10px; line-height: 30px; border-bottom: 1px solid #dedede;}
.item .ordinal { flex-basis: 5%; text-align: center; }
.item .name { flex-basis: 40%; }
.item .price { flex-basis: 10%; text-align: right; }
.item .amount { flex-basis: 20%; text-align: center; }
.item .subtotal { flex-basis: 15%; text-align: right; }
.item .operation { flex-basis: 10%; text-align: center;}
</style>